<template>
  <ga-table :data="tableData">
    <template #columns>

      <ga-table-column title="PID" data-index="pid">
      </ga-table-column>
      <ga-table-column title="TID" data-index="tid">
      </ga-table-column>
      <ga-table-column title="系统调用名" data-index="syscallName">
      </ga-table-column>
      <ga-table-column title="执行时长" data-index="time" :sortable="{sortDirections: ['ascend', 'descend'] , sorter:sorters['time']}">
        <template #cell="{ record }">
          {{ record.time ? formatUnit(record.time, 'ns') : '--' }}
        </template>
      </ga-table-column>
      <ga-table-column title="发生时间" data-index="timestamp" :sortable="{sortDirections: ['ascend', 'descend'] , sorter: sorters['timestamp']}">
      </ga-table-column>
      <ga-table-column title="异常类型" data-index="expType">
        <template #cell="{ record }">
          {{ record.statusCode >= 0 ? '慢调用' : '错误调用' }}
        </template>
      </ga-table-column>
    </template>

  </ga-table>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { systemExcepCall } from '@/api/topoNodeDetail';
import { formatUnit } from '@/utils/format'

const props = defineProps({
  name: String,
  timeInfo: {
    type: Object,
    default: () => ({})
  },
  masterIp: String,
  namespace: String,
  type: String,
  visible: Boolean
})
const tableData = ref([])
const filteredInfo = reactive({ expType: '2' })
const loading = ref(false)
const sorters = {
  time: {
    sorter(a, b, {direction}) {
      return direction === 'ascend' ? a.time - b.time: b.time - a.time
    }
  },
  timestamp: {
    sorter(a, b, {direction}) {
      return direction === 'ascend' ? new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime():new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
    }
  }
}
console.log(props, 'props in exception call');

const getTableData = () => {
  loading.value = true
  const { from, to } = props.timeInfo
  const { name, masterIp, namespace, type } = props
  const params = {
    name,
    masterIp,
    namespace,
    from, to, type, ...filteredInfo
  }
  !filteredInfo.expType && (params.expType = undefined);

  systemExcepCall(params).then(res => {
    tableData.value = res.data
  }).finally(() => {
    loading.value = false
  })

}

watch([() => props.visible, filteredInfo, () => props.timeInfo, () => props.name], ([visible]) => {
  console.log('get exception data');
  if (visible) {

    getTableData()
  }
}, { immediate: true })
watch(() => props.visible, (newV) => {
  console.log(newV, 'exception call visible');

  if (!newV) {
    filteredInfo.expType = undefined
  }
}, { immediate: true })
</script>

<style scoped lang="scss"></style>
